<template>
	<view class="login" :style="{height:wh+'px'}">
		<!-- 显示上方的图片 -->
		<view class="title">
			<view style="font-size: 40px;color: aquamarine; padding:0 20px ;">注册新用户</view>
		</view>
		<!-- 下方的表单 -->
		<view class="content">
			<uni-forms ref="logForm" :model="logFormData" :rules="rules" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput v-model="logFormData.username" prefix-icon="person" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="logFormData.password" prefix-icon="locked"
						placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="login()">注册</button>
		</view>
	</view>
</template>

<script setup>
	import {
			CONFIG
		} from "../../utils/config"
	import {
		ref
	} from "vue"
	import {
		onReady,
		onBackPress
	} from "@dcloudio/uni-app"
	import {
		userStore
	} from '/store/userStore.js'
	// 创建状态库对象
	const store = userStore();

	const logFormData = ref({
		username: '',
		password: ''
	})
	const rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: '请输入用户名'
				},
				{
					minLength: 3,
					maxLength: 10,
					errorMessage: '用户必须在{minLength}到{maxLength}个字符之间'
				}, {
					pattern: '^\\w{3,10}$',
					errorMessage: '请输入3-10位数字字母和下划线作为用户名'
				},

			]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码'
			}, {
				pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
				errorMessage: '请输入3-10位数字字母和特殊字符密码'
			}]
		}
	})

	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	const wh = ref(0)
	onReady(() => {

		wh.value = uni.getWindowInfo().windowHeight
	})

	// 登录表单数据和登录功能
	const logForm = ref(null)
	function login() {
		logForm.value.validate().then(res => {
			console.log(res)
			uni.$post(`${CONFIG.leanCloud_url}/1.1/users`, res).then(res2 => {
				console.log(res2)
				if (res2.statusCode = 200) {
					store.addUserInfo(res2.data.objectId, res2.data.username, res2.data.mobilePhoneNumber,
						res2.data.sessionToken)
					uni.navigateBack()
				} 
			})


		}).catch(err => {
			console.log(err);
			// 用户登录操作
		})

	}
	onBackPress((options) => {
		if (options.from == "backbutton") {
			return true;
		}
	})
</script>

<style scoped>
	.login {
		/* 这里添加边框,页面高度就没问题,如果不添加边框,那么页面内容就多余容器高度,显示滚动条,可以滚动
		 原因待查，。*/
		border: 1px solid red;
		position: relative;
	}

	/* 图片区域距离上方距离 */
	.login .title {
		margin-top: 100px;

		/* border: 1px solid red; */
	}

	/* 设置图片高度,宽度自适应 */
	.login .title image:nth-child(1) {
		height: 50px;
	}

	.login .title image:nth-child(2) {
		height: 30px;
	}

	/* 内容区域的外边距 */
	.login .content {
		margin: 10px 20px;
	}

	/* 注册链接样式 */
	.login .register {
		position: absolute;
		bottom: 20px;
		width: 100vw;
		text-align: center;
		color: #007aff;
		font-size: 20rpx;
	}
</style>